<template>
  <div>
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="8">
        <Card>
          <div id="barChart" :style="{width: '400px', height: '300px'}"></div>
        </Card>

      </Col>
      <Col :span="8">
        <Card>
          <div id="lineChart" :style="{width: '400px', height: '300px'}"></div>
        </Card>
      </Col>
      <Col :span="8">
        <Card>
          <div id="pieChart" :style="{width: '400px', height: '300px'}"></div>
        </Card>
      </Col>
    </Row>
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="6">
        <Card style="text-align: center;">
          <div style="float:left;position: absolute;">
            <Tooltip content="指标说明" placement="top-start">
              <Icon type="ios-help" size="22" color="#808695"></Icon>
            </Tooltip>
          </div>
          <Icon type="ios-construct" size="22"></Icon>
          <p style="font-size: 26px; font-weight: bold; color: rgb(70, 76, 91);">{{totalItils}}</p>
          <p style="color: rgb(158, 167, 180);">工单总数</p>
          <p style="color: #19be6b;">{{incRate}}</p>
        </Card>
      </Col>
      <Col :span="6">
        <Card style="text-align: center;">
          <div style="float:left;position: absolute;">
            <Tooltip content="指标说明" placement="top-start">
              <Icon type="ios-help" size="22" color="#808695"></Icon>
            </Tooltip>
          </div>
          <Icon type="ios-construct" size="22"></Icon>
          <p style="font-size: 26px; font-weight: bold; color: rgb(70, 76, 91);">{{finish}}</p>
          <p style="color: rgb(158, 167, 180);">已完成</p>
          <p style="color: #19be6b;">{{finishRate}}</p>
        </Card>
      </Col>
      <Col :span="6">
        <Card style="text-align: center;">
          <div style="float:left;position: absolute;">
            <Tooltip content="指标说明" placement="top-start">
              <Icon type="ios-help" size="22" color="#808695"></Icon>
            </Tooltip>
          </div>
          <Icon type="ios-construct" size="22"></Icon>
          <p style="font-size: 26px; font-weight: bold; color: rgb(70, 76, 91);">{{unFinish}}</p>
          <p style="color: rgb(158, 167, 180);">未完成</p>
          <p style="color: #19be6b;">{{unFinishRate}}</p>
        </Card>
      </Col>
      <Col :span="6">
        <Card style="text-align: center;">
          <div style="float:left;position: absolute;">
            <Tooltip content="指标说明" placement="top-start">
              <Icon type="ios-help" size="22" color="#808695"></Icon>
            </Tooltip>
          </div>
          <Icon type="ios-construct" size="22"></Icon>
          <p style="font-size: 26px; font-weight: bold; color: rgb(70, 76, 91);">{{doing}}</p>
          <p style="color: rgb(158, 167, 180);">进行中</p>
          <p style="color: #19be6b;">{{doingRate}}</p>
        </Card>
      </Col>
    </Row>
    <Row style="margin:0 0 10px 0" :gutter="10">
      <Col :span="12">
        <Card title="平均评分">
          <Row :gutter="10">
            <Col :span="2">
              <div style="position:relative;left:20px;font-size: 30px; font-weight: bold;line-height: 30px">
                {{avgScore}}
              </div>
            </Col>
            <Col :span="12">
              <Rate v-model="avgScore"
                    :allow-half="true"
                    :disabled="true"/>
            </Col>
          </Row>
          <div id="scoreChart" :style="{width: '400px', height: '300px',marginTop:'10px'}"></div>
        </Card>
      </Col>
      <Col :span="12">
        <Card title="动态">
          <List>
            <ListItem v-for="item in warningList" :key="item.id">{{item.desc}}</ListItem>
          </List>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
  import chartData from "./chart.json"
  import warningData from "./warningList.json"

  export default {
    name: "index.vue",
    data() {
      return {
        totalItils: 37999,
        incRate: '12.33%',
        finish: 37000,
        finishRate: '1.1%',
        unFinish: 999,
        unFinishRate: '100%',
        doing: 900,
        doingRate: '22%',
        avgScore: 2,
        warningList: warningData,
        timer: null
      }
    },
    mounted() {
      setTimeout(()=>{
        this.drawBar()
        this.drawLine()
        this.drawPie()
        this.drawScorePie()
        this.timer = setInterval(() => {
          this.freshWarn()
        }, 3000)
      },100)
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },
    methods: {
      drawBar() {
        //柱状图
        let barChart = this.$echarts.init(document.getElementById('barChart'))
        barChart.setOption({
          title: {text: '柱状图'},
          tooltip: {},
          legend: {},
          xAxis: {
            data: chartData.bar.index
          },
          yAxis: {},
          series: [{
            name: '指标值',
            type: 'bar',
            data: chartData.bar.value
          }]
        })
      },
      drawLine() {
        let lineChart = this.$echarts.init(document.getElementById('lineChart'))
        lineChart.setOption({
          title: {text: '折线图'},
          tooltip: {},
          legend: {},
          xAxis: {
            data: chartData.line.index
          },
          yAxis: {},
          series: [{
            name: '指标值',
            type: 'line',
            data: chartData.line.value
          }]
        })
      },
      drawPie() {
        let pieChart = this.$echarts.init(document.getElementById('pieChart'))
        pieChart.setOption({
          title: {text: '饼图'},
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 50,
            top: 20,
            bottom: 20,
            data: chartData.pie.legendData,
            selected: chartData.pie.selected
          },
          series: [{
            name: '月份',
            type: 'pie',
            radius: '50%',
            center: ['40%', '50%'],
            data: chartData.pie.seriesData
          }]
        })
      },
      drawScorePie() {
        let scoreChart = this.$echarts.init(document.getElementById('scoreChart'))
        scoreChart.setOption({
          title: {text: '评分分布'},
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
            type: 'scroll',
            orient: 'vertical',
            right: 50,
            top: 20,
            bottom: 20,
            data: chartData.scorePie.legendData,
            selected: chartData.scorePie.selected
          },
          series: [{
            name: '评分',
            type: 'pie',
            radius: '50%',
            center: ['40%', '50%'],
            data: chartData.scorePie.seriesData
          }]
        })
      },
      freshWarn() {
        let newWarn = {
          id: this.moment().format('YYYY-MM-DD HH:mm:ss'),
          time: this.moment().format('YYYY-MM-DD HH:mm:ss'),
          desc: this.moment().format('YYYY-MM-DD HH:mm:ss') + ' 发生【二级警报】事件：水温过低警告，当前水温x度，低于正常温度n%'
        }
        if (this.warningList.length === 5) {
          this.warningList = this.warningList.slice(this.warningList.length - 4)
          this.warningList.push(newWarn)

        } else if (this.warningList.length < 5) {
          this.warningList.push(newWarn)

        } else if (this.warningList.length > 5) {
          this.warningList = this.warningList.slice(this.warningList.length - 4)
          this.warningList.push(newWarn)
        }
      }
    }
  }
</script>

<style scoped>

</style>
